<template>
  <div class="index_page">
    <div class="header">
      <div class="top">
        <van-icon name="arrow-left" @click="back" />
        <van-icon name="wap-home-o" />
      </div>
      <img :src="require('../assets/images/index/WechatIMG57.png')" alt="" />
    </div>

    <div class="body">
      <div class="content">
        <div class="box" @click="toMykehu">
          <div class="box_top">
            <img :src="require('../assets/images/index/kehu.png')" alt="" />
          </div>
          <p>我的客户</p>
          <p>MY CUENTS</p>
        </div>
        <div class="box" @click="toKehuGuanhuai">
          <div class="box_top">
            <img :src="require('../assets/images/index/guanhuai.png')" alt="" />
          </div>
          <p>客户关怀</p>
          <p>CUSTOMER</p>
        </div>
        <div class="box" @click="toNews">
          <div class="box_top">
            <img :src="require('../assets/images/index/news.png')" alt="" />
          </div>
          <p>消息中心</p>
          <p>NEWS</p>
        </div>
        <div class="box" @click="toOrder">
          <div class="box_top">
            <img :src="require('../assets/images/index/wuliu.png')" alt="" />
          </div>
          <p>物流单</p>
          <p>LOGISTICS</p>
        </div>
      </div>
    </div>

    <!-- <div class="footer">
      <div class="fbox">
        <div class="icon">
          <img :src="require('../assets/images/index/xitong.png')" alt="" />
        </div>
        <p>系统功能</p>
      </div>
      <div class="fbox" @click="topersonal">
        <div class="icon">
          <img :src="require('../assets/images/index/geren.png')" alt="" />
        </div>
        <p>个人中心</p>
      </div>
    </div> -->

    <!-- <div class="lianxi"></div>
    <div class="lianxi lianxi2">
      <div class="icon">
        <img :src="require('../assets/images/index/lianxi.png')" alt="" />
      </div>
      <p>联系</p>
    </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    back() {
      this.$router.back();
    },
    toOrder() {
      this.$router.push("/order");
    },
    topersonal() {
      this.$router.push("/personal");
    },
    toNews() {
      this.$router.push("/newscenter");
    },
    toMykehu(){
      this.$router.push("/kehulist");
    },
    toKehuGuanhuai(){
      this.$router.push('/kehuguanhuai')
    }
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 175px;
  background-color: #003399;
  .top {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    box-sizing: border-box;
    .van-icon {
      font-size: 30px;
      color: #fff;
      &:nth-of-type(2) {
        font-size: 35px;
      }
    }
  }
  img {
    width: 80%;
    display: block;
    margin: 10px auto 50px;
  }
}

.body {
  width: 100%;
  height: 427px;
  background-color: #f5f5f5;
  overflow: hidden;
  .content {
    width: 277px;
    height: 358px;
    // background-color: pink;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .box {
      width: 133px;
      height: 175px;
      background-color: #fff;
      margin-bottom: 8px;
      .box_top {
        width: 39px;
        height: 39px;
        // border: 1px solid #000;
        margin: 30px auto;
        display: flex;
        align-items: center;
        img {
          width: 100%;
          // display: block;
          margin: auto;
        }
      }
      p {
        text-align: center;
        &:nth-of-type(2) {
          font-size: 12px;
          margin-top: 4px;
        }
      }
    }
  }
}

.footer {
  width: 100%;
  height: 65px;
  background-color: #fff;
  display: flex;
  overflow: hidden;
  .fbox {
    width: 50%;
    height: 65px;
    // border: 1px solid #000;
    .icon {
      width: 35px;
      height: 35px;
      // border: 1px solid #000;
      margin: auto;
      img {
        width: 80%;
        display: block;
        margin: 5px 0;
      }
    }
    p {
      text-align: center;
      margin-top: 4px;
      &:nth-of-type(1) {
        color: #003399;
      }
    }
  }
}

.lianxi {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background-color: #f5f5f5;
  position: fixed;
  left: 50%;
  bottom: 30px;
  margin-left: -38px;
}

.lianxi2 {
  width: 70px;
  height: 70px;
  background-color: #ffcc33;
  bottom: 33px;
  margin-left: -35px;
  text-align: center;
  color: #fff;
  .icon {
    width: 30px;
    height: 30px;
    display: block;
    margin: 10px auto;
    margin-bottom: 0px;
    img {
      width: 80%;
    }
    p {
      text-align: center;
    }
  }
}
</style>